<template>
  <div class="edit-wrp">
    <h3 class="title">Edit Book Name:</h3>
    <div class="input-wrp">
      <input v-model="value.name" class="input" @keypress="onUpdateKeypress" />
      <button class="btn-save" @click="update">保存</button>
    </div>
    <template v-if="false && !!userId">
      <h3 class="title">Add Book:</h3>
      <div class="input-wrp">
        <input v-model="data.name" class="input" />
        <button class="btn-save" @click="create">添加</button>
      </div>
    </template>
  </div>
</template>
<script>
import { BookModel } from '../../models'
export default {
  props: {
    value: {
      type: Object,
      default: () => {
        return {
          name: null,
        }
      },
    },
    userId: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      data: { name: null },
    }
  },
  mounted() {},
  methods: {
    onUpdateKeypress(evt) {
      evt.keyCode === 13 && this.save()
    },
    update() {
      this.value.save(this.userId)
    },
    create() {
      const book = BookModel.wrap(this.data)
      book.save(this.userId)
    },
  },
}
</script>
<style lang="less" scoped>
.edit-wrp {
  width: 300px;

  .input {
    width: 100%;
    height: 28px;
    font-size: 15px;
    border-radius: 6px;
    border: solid 1px #444;
    outline: none;
    text-indent: 10px;

    &:hover,
    &:focus {
      border-color: #33afc7;
    }
  }

  .input-wrp {
    display: flex;

    > input + input {
      margin-left: 10px;
    }

    .btn-save {
      width: 60px;
      min-width: 60px;
      margin-left: 10px;
      border: solid 1px #33afc7;
      background-color: white;
      transition: all ease 300ms;
      border-radius: 6px;
      cursor: pointer;
      outline: none;

      &:hover,
      &:focus {
        color: white;
        background-color: #33afc7;
      }
    }
  }
}
</style>